<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head lang="en">
    <meta charset="UTF-8" />
    <style>
        #main1{
            margin: auto;
        }
        #main2{
            margin: auto;
        }
    </style>
    <script th:src="@{/js/echarts.min.js}"></script>
    <script th:src="@{/js/echarts.js}"></script>
    <script th:src="@{/js/Chart.js}"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->  
    <div id="main1" style="width: 900px;height:400px;"></div>
    <div id="main2" style="width: 900px;height:400px;"></div>
    <div id="main3" style="width: 900px;height:400px;"></div>
<script type="text/javascript" th:src="@{/js/jquery-1.8.3.min.js}"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('main1'));
        var myChart2 = echarts.init(document.getElementById('main2'));
        var myChart3 = echarts.init(document.getElementById('main3'));
        var colors = ['#5793f3', '#d14a61', '#675bba'];
        option1 = {
            color: colors,
            title: {
                text: '各渠道注册用户数',
                left: 'center'
            },
            backgroundColor: '#fefefe',
            tooltip: {
                trigger: 'none',
                axisPointer: {
                    type: 'cross'
                }
            },
            legend: {
                bottom: 'top',
                textFont: 'bold 20px verdana',
                data:['新浪财经','融360', '百度']
            },
            grid: {
                top: 70,
                bottom: 50
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        onZero: false,
                        lineStyle: {
                            color: colors[1]
                        }
                    },
                    axisPointer: {
                        label: {
                            formatter: function (params) {
                                return '新浪财经' + params.value
                                    + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                            }
                        }
                    },
                    data: ['5-01', '5-02', '5-03', '5-04', '5-05', '5-06', '5-07', '5-08', '5-09', '5-10', '5-11', '5-12', '5-13']
                },
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        onZero: false,
                        lineStyle: {
                            color: colors[0]
                        }
                    },
                    axisPointer: {
                        label: {
                            formatter: function (params) {
                                return '融360' + params.value
                                    + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                            }
                        }
                    },
                    data: []
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [ {
                name:'新浪财经',
                type:'line',
                xAxisIndex: 1,
                smooth: true,
                data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 56.0, 12.3]
            },
                {
                    name:'融360',
                    type:'line',
                    smooth: true,
                    data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]
                },
                {
                    name:'百度',
                    type:'line',
                    smooth: true,
                    data: [3.7, 5.9, 19.1, 17.7, 88.3, 39.2, 131.6, 146.6, 155.4, 118.4, 10.3, 10.7]
                }
                ]
        };
        myChart1.setOption(option1);
        /*$(function () {
            $.ajax({
                "url": "jh/",
                "type": "get",
                "data": {},
                "datetype": "JSON",
                "success": function (data) {
                    option1.series = [data.serieA, data.serieB, data.serieC];
                    myChart1.setOption(option1);
                    console.log(option1.series)
                }
            })
        });*/

    </script>
</body>
</html>